<template>
	<view>

		<!--切换-->
	<!--	<view class="top-tabbar">
			<view :class="state_active == item.value? 'tab-item active' : 'tab-item'" @click="stateFunc(item.value)"  v-for="(item,index) in tableList" :key="index">{{item.text}}</view>
		</view>-->

        <view class="fsc top-tabbar" style="padding: 30rpx;background-color: white;z-index: 200;position: absolute;width: 100%">
            <view @click="timeshow=true" style="color: rgba(0,0,0,0.5);text-align: center;width: 45%" >
                时间 <u-icon name="arrow-down-fill" size="20" style="margin-left: 15rpx"></u-icon>
            </view>
            <view @click="payshow=true,timeshow=false" style="color: rgba(0,0,0,0.5);text-align: center;width: 45%">
                提现方式 <u-icon name="arrow-down-fill" size="20" style="margin-left: 15rpx"></u-icon>
            </view>

        </view>


        <u-popup v-model="timeshow"  mode="top"   z-index="80" negative-top="200"   >
            <view style="padding: 30rpx;margin-top: 100rpx">
                <view style="display: flex">
                    <view :class="timetype==0?'actday':'day'" style="width: 50%;padding-bottom: 20rpx">
                        <view style="color: rgba(0,0,0,0.5);font-size: 24rpx">
                            开始
                        </view>
                        <view class="ditem" @click="startshow=true,timetype=0" style="font-size: 32rpx;">
                            {{st_year}}年{{st_month}}月
                        </view>
                    </view>
                    <view :class="timetype==1?'actday':'day'" style="width: 50%;padding-bottom: 20rpx">
                        <view style="color: rgba(0,0,0,0.5);font-size: 24rpx">
                            结束
                        </view>
                        <view class="ditem" @click="endshow=true,timetype=1" style="font-size: 32rpx;">
                        {{year}}年{{month}}月
                        </view>
                    </view>

                </view>

            </view>
            <view style="height: 50rpx">
            </view>
            <view class="fsc" style="width: 90%;margin: auto">
                <view @click="timeinit" class="hlbbuttonempty" style="border: 1px #FF4849 solid;border-radius:16rpx;height: 80rpx;line-height: 80rpx;width: 45% ">
                    重置
                </view>
                <view @click="timesubmit()" class="hlbbutton" style="border: 1px #FF4849 solid;border-radius:16rpx;height: 80rpx;line-height: 80rpx;width: 45% " >
                    确定
                </view>
            </view>

        </u-popup>


        <u-select v-model="payshow" :list="paylist" @confirm="payconfirm"></u-select>

        <u-picker mode="time" v-model="startshow" :params="params" @confirm="stconfirm"></u-picker>
        <u-picker mode="time" v-model="endshow" :params="params" @confirm="endconfirm"></u-picker>

		<!--列表-->

        <view style="height: 120rpx">

        </view>
		<scroll-view scroll-y="true" class="scroll-Y"  :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50"
		 @scrolltoupper="scrolltoupperFunc" @scrolltolower="scrolltolowerFunc">
			<view class="p-0-30 bg-white">
                <view style="padding: 20rpx;border-bottom: 1px #DEDEDE solid;" v-for="(item,index) in tableData">
                    <view class="fsc">
                        <view>
                            提现单号{{item.order_no}}
                        </view>
                        <view style="color: #FF4849;font-size: 32rpx">
                           ¥ {{ item.money }}
                        </view>
                    </view>
                    <view class="fsc">
                        <view style="color: rgba(0,0,0,0.5)">
                            {{item.create_time}}
                            <text style="margin-left: 15rpx">
                                {{item.pay_type_text}}
                            </text>
                        </view>
                        <view style="color: rgba(0,0,0,0.5)">
                            {{ item.apply_status.text }}
                        </view>
                    </view>
                </view>
			
			<!--	<view class="d-b-c border-b p-20-0" v-for="(item,index) in tableData" :key="index">
					<view class="d-s-s f-w d-c flex-1">
						<text class="30">提现</text>
						<text class="gray9 f22">{{item.create_time}}</text>
					</view>
					<view>
						<text :class="item.apply_status.text=='审核通过'?'green':'gray9'">{{ item.apply_status.text }}</text>
						<text class="red ml20"> {{ item.money }}元</text>
					</view>
				</view>-->
			</view>
			
			<view class="p-0-30">
				<!--<view class="">
					<view class="bottom-refresh">
						<view class="d-c-c p30" v-if="tableData.length && no_more">
							<text class="gray3">亲, 没有更多了</text>
						</view>
						<view v-if="loading" class="d-c-c p30">
							<text class="gray3">加载中...</text>
						</view>
					</view>
				</view>-->
				<!-- 没有记录 -->
				<view class="d-c-c p30" v-if="tableData.length==0 && !loading">
					<view style="padding-top: 250rpx;width: 100%;text-align: center;">
						<image class="light" src="http://img.pighack.com/202203251056291d3fb2310.png" style="width: 100%" mode="widthFix"></image>
						<view style="color:#999999;font-size: 28rpx;">亲，暂无相关记录哦</view>
					</view>
					<!-- <text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂无相关记录哦</text> -->
				</view>
				<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
			</view>
		</scroll-view>

	</view>
</template>

<script>
    var _self;
	import uniLoadMore from "@/components/uni-load-more.vue";
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {

				/*手机高度*/
				phoneHeight: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				/*状态选中*/
				state_active: -1,
				/*数据列表*/
				tableData: [],
				no_more: false,
				loading: true,
				/*最后一页码数*/
				last_page: 0,
				/*当前页面*/
				page: 1,
				/*每页条数*/
				list_rows: 20,
				tableList: [],
                timeshow:false,
                timetype:0,
                startshow:false,
                endshow:false,
                starttime:'',
                endtime:'',
                year : '',
                month : '',
                st_year : '',
                st_month: '',
                 params : {
                    year: true,
                    month: true,
                    day: false,
                    hour: false,
                    minute: false,
                    second: false,
                    province: true,
                    city: true,
                    area: true,
                    timestamp: true, // 1.3.7版本提供
                },
                payshow:false,
                pay_type:'',
                paylist: [
                    {
                        value: '10',
                        label: '微信钱包'
                    },
                    {
                        value: '20',
                        label: '支付宝'
                    },
                    {
                        value: '30',
                        label: '银行卡'
                    }
                ],

			}
		},
		computed: {

			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.tableData.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		mounted() {
			/*初始化*/
			this.init();
			/*获取数据*/
			this.getData();
		},
		methods: {
            payconfirm(e){
                console.log(e)
                _self.pay_type = e[0].value;
                _self.payshow=false;
                _self.tableData =[];
                _self.page=1;
                _self.getData()

            },
            stconfirm(e){
                console.log(e)
                _self.st_year = e.year;
                _self.st_month = e.month;
            },
            endconfirm(e){
                console.log(e)
                _self.year = e.year;
                _self.month = e.month;
            },
            timeinit(){
                let nowDate = new Date();
                this.year = nowDate.getFullYear();
                this.month = nowDate.getMonth()+1;
                this.st_year = nowDate.getFullYear();
                this.st_month = nowDate.getMonth();
            },
            timesubmit(){
            _self.timeshow=false;
                _self.tableData =[];
                _self.page=1;
                _self.getData()
            },
			/*初始化*/
			init() {
                _self =this;
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						// 计算组件的高度
						let view = uni.createSelectorQuery().select('.top-tabbar');
						view.boundingClientRect(data => {
							let h = self.phoneHeight - data.height;
							self.scrollviewHigh = h;
						}).exec();
					}
				});
				self.timeinit()
			},
			/*获取数据*/
			getData() {
			    console.log('getData')
				let self = this;
				let page = self.page;
				self.loading = true;
				let list_rows = self.list_rows;
				let data = {
                    status: self.state_active,
                    page: page || 1,
                    list_rows: list_rows,
                    pay_type: self.pay_type,
                    // year1:self.st_year,
                    // year2:self.year,
                    month1:self.st_year+'-'+self.st_month,
                    month2:self.year+'-'+self.month,
                };
				console.log(data)
				self._get('plus.agent.cash/lists', {
					status: self.state_active,
					page: page || 1,
					list_rows: list_rows,
                    pay_type: self.pay_type,
                    // year1:self.st_year,
                    // year2:self.year,
                    month1:self.st_year+'-'+self.st_month,
                    month2:self.year+'-'+self.month,
				}, function(data) {
				    console.log(data)
					self.loading = false;
					 // 导航栏数据
					    self.tableList  = [{
					        value: -1,
					        text: data.data.words.cash_list.words.all.value,
					      }, {
					        value: 10,
					        text: data.data.words.cash_list.words.apply_10.value,
					      }, {
					        value: 20,
					        text: data.data.words.cash_list.words.apply_20.value,
					      },
					      {
					        value: 40,
					        text: data.data.words.cash_list.words.apply_40.value,
					      },
					      {
					        value: 30,
					        text: data.data.words.cash_list.words.apply_30.value,
					      }
					    ];
					self.tableData = self.tableData.concat(data.data.list.data);
					self.last_page = data.data.list.last_page;
					if (data.data.list.last_page <= 1) {
						self.no_more = true;
						return false;
					}
				});
			},

			/*切换*/
			stateFunc(e) {
				let self = this;
				if(e!=self.state_active){
					self.tableData = [];
					self.page = 1;
					self.state_active = e;
					self.getData();
				}
			},

			/*可滚动视图区域到顶触发*/
			scrolltoupperFunc() {
				console.log('滚动视图区域到顶');
			},

			/*可滚动视图区域到底触发*/
			scrolltolowerFunc() {
				let self = this;
				if (self.page < self.last_page) {
					self.page++;
					self.getData();
				}
				self.no_more = true;
			}
		}
	}
</script>

<style lang="scss">
    .actday{
        border-bottom: 1px #FF4849 solid;
        .ditem{
            color: #FF4849;
        }
    }
    .day{
        .ditem{
            color: rgba(0, 0, 0, 0.69);
        }
    }

</style>
